<template>
	<view class="icon-export-container">
		<view class="header">
			<text class="title">图标导出工具</text>
		</view>
		
		<view class="icon-selection">
			<view class="section-title">选择图标</view>
			<view class="icon-list">
				<!-- 货品图标选项 -->
				<view class="icon-group">
					<text class="group-title">货品图标</text>
					<view class="icon-row">
						<view 
							v-for="(icon, index) in goodsIcons" 
							:key="'goods-'+index" 
							class="icon-item"
							@click="selectIcon('goods', icon)"
							:class="{selected: selectedIcons.goods === icon}"
						>
							<uni-icons :type="icon" size="30" color="#909399"></uni-icons>
							<text class="icon-name">{{icon}}</text>
						</view>
					</view>
				</view>
				
				<!-- 开单图标选项 -->
				<view class="icon-group">
					<text class="group-title">开单图标</text>
					<view class="icon-row">
						<view 
							v-for="(icon, index) in orderIcons" 
							:key="'order-'+index" 
							class="icon-item"
							@click="selectIcon('order', icon)"
							:class="{selected: selectedIcons.order === icon}"
						>
							<uni-icons :type="icon" size="30" color="#909399"></uni-icons>
							<text class="icon-name">{{icon}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="preview-section">
			<view class="section-title">预览</view>
			<view class="tabbar-preview">
				<view class="tab-item">
					<uni-icons type="home" size="24" color="#909399"></uni-icons>
					<text>首页</text>
				</view>
				<view class="tab-item">
					<uni-icons :type="selectedIcons.goods || 'shop'" size="24" :color="selectedTab === 'goods' ? '#306EF6' : '#909399'"></uni-icons>
					<text :style="{color: selectedTab === 'goods' ? '#306EF6' : '#909399'}">货品</text>
				</view>
				<view class="tab-item">
					<uni-icons :type="selectedIcons.order || 'list'" size="24" :color="selectedTab === 'order' ? '#306EF6' : '#909399'"></uni-icons>
					<text :style="{color: selectedTab === 'order' ? '#306EF6' : '#909399'}">开单</text>
				</view>
				<view class="tab-item">
					<uni-icons type="cart" size="24" color="#909399"></uni-icons>
					<text>购物车</text>
				</view>
				<view class="tab-item">
					<uni-icons type="person" size="24" color="#909399"></uni-icons>
					<text>我的</text>
				</view>
			</view>
		</view>
		
		<view class="action-buttons">
			<button @click="selectedTab = 'goods'" :class="{active: selectedTab === 'goods'}">预览货品选中状态</button>
			<button @click="selectedTab = 'order'" :class="{active: selectedTab === 'order'}">预览开单选中状态</button>
			<button @click="exportIcons" class="export-btn">生成图标</button>
		</view>
		
		<view class="export-tips">
			<view class="section-title">使用说明</view>
			<view class="tips-content">
				<text>1. 选择你喜欢的"货品"和"开单"图标</text>
				<text>2. 预览选中效果</text>
				<text>3. 点击"生成图标"后，将自动截图并通知你保存图片</text>
				<text>4. 将截图裁剪并保存到static/images/tabbar/目录</text>
				<text>5. 图标命名需与pages.json中的路径一致：</text>
				<text class="indent">- goods.png (普通状态)</text>
				<text class="indent">- goods-active.png (选中状态)</text>
				<text class="indent">- order.png (普通状态)</text>
				<text class="indent">- order-active.png (选中状态)</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsIcons: ['shop', 'gift', 'cart-filled', 'gift-filled', 'tag', 'tag-filled', 'goods', 'goods-filled'],
				orderIcons: ['list', 'paperplane', 'paperplane-filled', 'plus', 'plus-filled', 'compose', 'flag', 'flag-filled'],
				selectedIcons: {
					goods: '',
					order: ''
				},
				selectedTab: ''
			}
		},
		methods: {
			selectIcon(type, icon) {
				this.selectedIcons[type] = icon;
			},
			exportIcons() {
				if (!this.selectedIcons.goods || !this.selectedIcons.order) {
					uni.showToast({
						title: '请选择货品和开单图标',
						icon: 'none'
					});
					return;
				}
				
				uni.showToast({
					title: '图标选择完成，请通过截图保存',
					icon: 'none',
					duration: 3000
				});
				
				// 显示导出指南
				setTimeout(() => {
					uni.showModal({
						title: '图标导出指南',
						content: '请按照以下步骤操作：\n1. 对本页面进行截图\n2. 裁剪出各个图标\n3. 保存到static/images/tabbar/目录\n4. 命名为goods.png, goods-active.png, order.png, order-active.png',
						showCancel: false
					});
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
.icon-export-container {
	padding: 30rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

.header {
	margin-bottom: 30rpx;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin: 20rpx 0;
}

.icon-selection {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
}

.icon-group {
	margin-bottom: 30rpx;
	
	.group-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}
}

.icon-row {
	display: flex;
	flex-wrap: wrap;
}

.icon-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 0;
	
	&.selected {
		background-color: #e6f7ff;
		border-radius: 8rpx;
	}
	
	.icon-name {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}
}

.preview-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
}

.tabbar-preview {
	display: flex;
	justify-content: space-around;
	border-top: 1px solid #eee;
	padding-top: 20rpx;
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		text {
			font-size: 24rpx;
			color: #909399;
			margin-top: 8rpx;
		}
	}
}

.action-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 30rpx;
	
	button {
		margin-bottom: 15rpx;
		font-size: 28rpx;
		background-color: #f5f5f5;
		color: #666;
		border: none;
		flex: 0 0 48%;
		
		&.active {
			background-color: #e6f7ff;
			color: #306EF6;
		}
		
		&.export-btn {
			flex: 0 0 100%;
			background-color: #306EF6;
			color: #fff;
			margin-top: 15rpx;
		}
	}
}

.export-tips {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	
	.tips-content {
		display: flex;
		flex-direction: column;
		
		text {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 10rpx;
			
			&.indent {
				padding-left: 30rpx;
			}
		}
	}
}
</style> 